<template>
  <div class="">
    <div id="index-box">
      <scroller :on-infinite="infinite" ref="myScroller">
        <header>
          <div class="header-top">
            <div class="top-left">
              <i class="icon iconfont icon-dingwei"></i>
              <span>东城区北京市政府</span>
              <i class="icon iconfont icon-xiajiantou"></i>
            </div>
            <div class="top-right">
              <span>29°</span>
              <i class="icon iconfont icon-xingxing"></i>
            </div>
          </div>
          <div class="header-content">
            搜素商家、商品
          </div>
          <div class="swiper-box">
            <div class="swiper-container" id="swiper-header">
              <div class="swiper-wrapper">
                <div class="swiper-slide">酸辣粉</div>
                <div class="swiper-slide">奶茶</div>
                <div class="swiper-slide">朝香粥</div>
                <div class="swiper-slide">麻辣拌</div>
                <div class="swiper-slide">我的菜</div>
                <div class="swiper-slide">兔头</div>
                <div class="swiper-slide">麻辣烫</div>
                <div class="swiper-slide">哈根达斯</div>
                <div class="swiper-slide">鱼香茄子饭</div>
                <div class="swiper-slide">龙门</div>
              </div>
            </div>
          </div>
        </header>
        <div class="container">
          <div class="swiper-container" id="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img
                  src="//fuss10.elemecdn.com/0/21/40b7df2d66c3b895ccf3349069e55jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                  alt="...">
                <p>美食</p>
              </div>
              <div class="swiper-slide">
                <img
                  src="//fuss10.elemecdn.com/8/a5/78332f1f7ff14afbb97b4f125911cjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                  alt="...">
                <p>下午茶</p>
              </div>
              <div class="swiper-slide">
                <img
                  src="//fuss10.elemecdn.com/0/da/f42235e6929a5cb0e7013115ce78djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                  alt="...">
                <p>商超福利</p>
              </div>
              <div class="swiper-slide">
                <img
                  src="//fuss10.elemecdn.com/d/49/7757ff22e8ab28e7dfa5f7e2c2692jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                  alt="...">
                <p>预定早餐</p>
              </div>
              <div class="swiper-slide">
                <img
                  src="//fuss10.elemecdn.com/0/21/40b7df2d66c3b895ccf3349069e55jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                  alt="...">
                <p>周末福利</p>
              </div>
              <div class="swiper-slide">
                <img
                  src="//fuss10.elemecdn.com/b/7f/432619fb21a40b05cd25d11eca02djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                  alt="...">
                <p>汉堡薯条</p>
              </div>
              <div class="swiper-slide">
                <img
                  src="//fuss10.elemecdn.com/2/17/244241b514affc0f12f4168cf6628jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                  alt="...">
                <p>包子粥店</p>
              </div>
              <div class="swiper-slide">
                <img
                  src="//fuss10.elemecdn.com/8/83/171fd98b85dee3b3f4243b7459b48jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                  alt="...">
                <p>鲜花蛋糕</p>
              </div>
              <div class="swiper-slide">
                <img
                  src="//fuss10.elemecdn.com/c/db/d20d49e5029281b9b73db1c5ec6f9jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                  alt="...">
                <p>果蔬生鲜</p>
              </div>
              <div class="swiper-slide">
                <img
                  src="//fuss10.elemecdn.com/a/fa/d41b04d520d445dc5de42dae9a384jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                  alt="...">
                <p>新店特惠</p>
              </div>
              <div class="swiper-slide">
                <img
                  src="//fuss10.elemecdn.com/3/84/8e031bf7b3c036b4ec19edff16e46jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                  alt="...">
                <p>准时达</p>
              </div>
              <div class="swiper-slide">
                <img
                  src="//fuss10.elemecdn.com/d/38/7bddb07503aea4b711236348e2632jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                  alt="...">
                <p>午餐</p>
              </div>
              <div class="swiper-slide">
                <img
                  src="//fuss10.elemecdn.com/3/c7/a9ef469a12e7a596b559145b87f09jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                  alt="...">
                <p>麻辣烫</p>
              </div>
              <div class="swiper-slide">
                <img
                  src="//fuss10.elemecdn.com/a/8a/ec21096d528b7cfd23cdd894f01c6jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                  alt="...">
                <p>地方菜系</p>
              </div>
              <div class="swiper-slide">
                <img
                  src="//fuss10.elemecdn.com/7/b6/235761e50d391445f021922b71789jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                  alt="...">
                <p>披萨意面</p>
              </div>
              <div class="swiper-slide">
                <img
                  src="//fuss10.elemecdn.com/6/d2/de0683a49a0655c728b70fdb344d5jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                  alt="...">
                <p>异国料理</p>
              </div>

            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
          </div>

          <ul class="main">
            <router-link tag="li" :to="{path:'/stop/'+index}" v-for="(item,index) in movieList" :key="index">
              <img :src="item.pics[0]" alt="" >
              <div class="info">
                <div class="title">
                  {{item.name}}
                </div>
                <div class="star-box">
                  <span>月售{{item.sellCount}}单</span>
                  <span class="span">{{item.description}}</span>
                </div>
                <div class="dilive-box">
                  <p>￥{{item.minPrice}}起送 / 配送费{{item.deliveryPrice}}</p>
                  <p><span>1.07km / </span><span>{{item.sellCount}}分钟</span></p>
                </div>
              </div>
            </router-link>
          </ul>
        </div>

      </scroller>
    </div>
    <footer-bar></footer-bar>
  </div>
</template>
<script>
  import Vue from 'vue'
  import VueAwesomeSwiper from 'vue-awesome-swiper'
  import footerBar from '@/components/footerBar'
  import VueScroller from 'vue-scroller'

  Vue.use(VueScroller)
  export default {
    components: {
      footerBar,
      VueAwesomeSwiper

    },
    data(){
      return {
        noData: false,
        movieList: [],
        totleMovie: []

      }
    },
    mounted() {
      var mySwiper = new Swiper('#swiper-header', {
        slidesPerView: 'auto'
      })
      var mySwiperCon = new Swiper('#swiper-container', {
        //竖直2行
        slidesPerColumn: 2,
        //横向排列
        slidesPerColumnFill: "row",
        //一行4个
        slidesPerView: 4,
        //每次滚动8个
        slidesPerGroup: 8,
        // 如果需要分页器
        pagination: '.swiper-pagination',
      })
      this.axios.get('/api/seller').then((res) => {
        this.totleMovie = res.data.data
        let temp = this.totleMovie.concat()
        this.movieList = temp.splice(0, 5)
      })
    },
    methods: {
      infinite(done){
        let slef = this;
        if (this.noData) {
          setTimeout(() => {
            slef.$refs.myScroller.finishInfinite(2)
          })
          return
        }
        let length = this.movieList.length;
        setTimeout(() => {
          let temp = slef.totleMovie.concat()
          let start = temp.splice(length, 5)
          if (start == 0) {
            slef.noData = true
          }
          slef.movieList = slef.movieList.concat(start)
          slef.$refs.myScroller.resize();
          done()
        }, 1000)
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../../static/less/var.less";

  #index-box {
    position: absolute;
    top: 0;
    left: 0;
    bottom: @base*100rem;
    width: 100%;
    header {
      background: #0094FF;
      height: @base*204rem;
      padding: @base*20rem @base*28rem;
      .header-top {
        height: @base*75rem;
        display: flex;
        justify-content: space-between;
        line-height: @base*75rem;
        .top-left {
          width: @base*417rem;
          color: #fff;

          i {
            font-size: @base*32rem;
          }
          span {
            font-size: @base*32rem;
          }
        }
        .top-right {
          color: #fff;
          font-size: @base*30rem;
        }
      }
      .header-content {
        height: @base*70rem;
        margin: @base*12rem 0;
        background: #fff;
        font-size: @base*25rem;
        border-radius: 30px;
        text-align: center;
        line-height: @base*70rem;
        color: @fc1;
      }
      .swiper-box .swiper-slide {
        width: auto;
        color: #fff;
        font-size: @base*24rem;
        margin-right: @base*30rem;
      }
    }
    #swiper-container {
      height: @base*354rem;
      background: #fff;
      .swiper-slide {
        height: 50%;
        text-align: center;
        img {
          width: @base*90rem;
          height: @base*90rem;
        }
        p {
          font-size: @base*24rem;
          color: @fc1;
        }
      }
    }
    .main {
      margin-top: @base*25rem;
      li {
        width: 94%;
        padding: @base*30rem 3%;
        border-bottom: @bc1 1px solid;
        display: flex;
        color: @fc1;
        font-size: @base*22rem;
        background: #fff;
        img {
          width: @base*120rem;
          height: @base*120rem;
          margin-right: @base*10rem;
        }
        .info {
          width: 100%;
          .title {
            font-weight: bold;
            font-size: @base*28rem;
            color: #333;
          }
          .span {
            display: inline-block;
            width: @base*110rem;
            height: @base*26rem;
            background: #0094FF;
            color: #fff;
            text-align: center;
            line-height: @base*26rem;
            font-size: @base*20rem;
            border-radius: 2px;
            float: right;
            margin-right: @base*10rem;
          }
          .dilive-box {
            display: flex;
            width: 100%;
            justify-content: space-between;
            span:nth-of-type(2) {
              color: #0094FF;
            }
          }
        }

      }
    }
  }
</style>
